<template>
  <div class="root-page">

    <img class="tip-img" src="@/assets/img/404.png">
    <div class="tip-info">
      <div v-if="error.statusCode === 403">Forbidden</div>
      <div v-if="error.statusCode === 404">Page not found</div>
      <div v-if="error.statusCode === 500">Server Error</div>
      <div v-else>{{error.message}}</div>
    </div>

    <div class="btn-list">
      <el-button plain class="btn" type="danger" size="medium" @click="clearCache">清除缓存</el-button>
      <el-button plain class="btn" type="danger" size="medium" @click="toHome">返回首页</el-button>
    </div>
  </div>
</template>

<script>
import LocalStorage from "@/utils/localStorage.js"
export default {
  props: ['error'],

  methods:{
    clearCache(){
      LocalStorage.clear();
      this.$message.success("已清除换成！");
    },

    toHome(){
      this.$router.replace('/');
    },
  }
}
</script>

<style lang="less" scoped>
@import '@/assets/css/index.less';

.root-page {
  font-size: 18px;
  color: #353535;
  height: 100vh;
  .flex-center-start();
  flex-direction: column;

  .tip-img{
    height: 200px;
    margin-top: 150px;
  }

  .tip-info{
    margin-top: 50px;
    .flex-center-center();
    flex-direction: column;
    font-size: 18px;
    font-weight: bold;
  }

  .btn-list{
    .flex-center-start();
    margin: 50px;

    .btn{
      margin: 0 20px;
    }
  }

  .tip-bottom{
    color: #888888;
  }
}
</style>